<template>
  <div class="AddressList">
    <div class="head">
      <van-nav-bar
        title="收货地址"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import Vue from 'vue'
import { AddressList, NavBar } from 'vant'
Vue.use(AddressList).use(NavBar)
export default {
  name: 'AddressList',
  created () {
    if (!this.$route.query.i) {
      console.log('11231412')
    } else if (this.$route.query.i >= 3) {
      console.log('111111111111')
      let pp = {
        id: this.$route.query.content.id,
        name: this.$route.query.content.name,
        tel: this.$route.query.content.tel,
        isDefault: this.$route.query.content.isDefault,
        address: this.$route.query.content.addressDetail
      }
      this.list.push(pp)
    } else {
      console.log('122222222')
      let i = this.$route.query.i
      i--
      this.list[i].id = this.$route.query.content.id
      this.list[i].name = this.$route.query.content.name
      this.list[i].tel = this.$route.query.content.tel
      this.list[i].isDefault = this.$route.query.content.isDefault
      this.list[i].address = this.$route.query.content.addressDetail
    }
  },
  data () {
    return {
      chosenAddressId: '1',
      list: [
        {
          id: '1',
          name: '张三',
          tel: '12345678910',
          address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
          isDefault: true
        },
        {
          id: '2',
          name: '李四',
          tel: '12345678910',
          address: '浙江省杭州市拱墅区莫干山路 50 号'
        }
      ]
    }
  },
  methods: {
    onAdd () {
      this.$router.push('/AddressEdit')
    },
    onEdit (item, index) {
      this.$router.push({ path: '/AddressEdit', query: { item, index } })
    },
    onClickLeft () {
      this.$router.push('Myself')
    }
  }
}
</script>

<style scoped>
.shop-bottom {
  margin-bottom: 50px;
}
</style>
